<template>
<div class="layout">
    <button class="other" @click="prePage" :disabled="selIndex === 1">上一页 </button>
    <li v-show="isLastMore" @click="retreat" ref="lastMoreRef"><button><el-icon><MoreFilled /></el-icon></button></li>
    <ul ref="ulRef">
        <template  v-for="item in total" :key="item">
            <li v-if="isShow(item)" @click="goSelPage(item)">
                <button :class="item === selIndex?'selected':''">{{ item }}</button>
            </li>
        </template>
    </ul>
    <li v-show="isNextMore" ref="nextMoreRef" @click="forward"><button ><el-icon><MoreFilled /></el-icon></button></li>
    <button class="other" @click="nextPage" :disabled="selIndex === total">下一页</button>
</div> 
</template>

<script lang="ts" setup>
import { ref,computed,nextTick, watch, onBeforeMount, onMounted, onUpdated } from 'vue'
import { baseRouteGetStatus } from '@/router/changeUrl'
import { useRouter } from 'vue-router'



interface Props{
    total:number    //总页数
}

const props = defineProps<Props>()
const router = useRouter()
const emit = defineEmits(['changeIndex'])
let page = 5                            //默认首次展示条数
let isLastMore = ref<boolean>(false)    //前面的省略号
let isNextMore = ref<boolean>(false)    //后面的省略号
let selIndex = ref<number>(1)           //当前索引
const nextMoreRef = ref()               //前面省略号node节点
const lastMoreRef = ref()               //后面省略号node节点
const ulRef = ref()
let map: Map<string,string | number> = new Map()

//在初次加载后就不再执行
onMounted(() => {
   baseRouteGetStatus(router,map)
    if (map.has('page')) {
        selIndex.value =  Number(map.get('page'))
    }
})
//选页加载
function goSelPage(val:number){
    if (selIndex.value === val) return
    selIndex.value = val
    return emit('changeIndex',selIndex.value)
}
function prePage() {
    selIndex.value -= 1
    return emit('changeIndex',selIndex.value)
}
function nextPage() {
    selIndex.value += 1
    return emit('changeIndex',selIndex.value)
}
//点击向后省略号时 向前进5
function forward(){
    selIndex.value += 5
    if (selIndex.value >= props.total) {
        selIndex.value = props.total
    }
    return emit('changeIndex',selIndex.value)
}
//点击向前省略号时 向后退5
function retreat(){
    selIndex.value -= 5 
    if (selIndex.value <= 0) {
        selIndex.value = 1
    }
    return emit('changeIndex',selIndex.value)
}

//前面的省略号
function isShowLastMore(){
    isLastMore.value = true
    if (ulRef.value) {
        ulRef.value.insertBefore(lastMoreRef.value,ulRef.value.firstElementChild?.nextElementSibling)
    }
}
//移除前面的省略号
function removeLastMore(){
    isLastMore.value = false
    ulRef.value.removeChild(lastMoreRef.value)
}
//后面的省略号
function isShowNextMore(){
    isNextMore.value = true
    if (ulRef.value) {
        ulRef.value.insertBefore(nextMoreRef.value,ulRef.value.lastElementChild)
    }
}
//移除后面的省略号
function removeNextMore(){
    isNextMore.value = false
    ulRef.value.removeChild(nextMoreRef.value)
}
//重构组件内容
function updateContent(val:number){
    if (val < page && isLastMore.value) {
        removeLastMore()
    }
    if (val >= page && !isLastMore.value) {
        isShowLastMore()
    }
    if (val <= props.total - page && !isNextMore.value) {
        isShowNextMore()
    }
    if (val > props.total - page && isNextMore.value) {
        removeNextMore()
    }
}
//当 当前索引大于page + 2 时 显示前面的省略号
let xx = ref(false)
//当 当前索引大于total - page 时 不显示后面的省略号
let xxx = ref(false)

const isShow = computed(() => (val:number) => {
    if (( val  <= page || val === props.total ) && !xx.value && !xxx.value) {       //初始时 加载1-page页 和省略号和最后一个
        return true
    }
    if (( val === 1 || val === props.total ) && xx.value && !xxx.value) {           //当前索引大于page时 展示1 和 最后一个
        return true
    }
    if (( val >= selIndex.value - 2 && val <= selIndex.value + 2 ) && xx.value && !xxx.value){      //当前索引大于page时 显示当前元素的前后两个元素
        return true
    }
    
    if (( val >= props.total - page ) && !xx.value && xxx.value) {                 //当前索引大于total - page 时 val > total - page显示 其他的不显示
        return true
    }
    if (val === 1 && xxx.value && !xx.value) {              //当前索引大于total - page 时 显示第一个
        return true
    }
    return false
})
watch(() => selIndex.value, (val) => {
    updateContent(selIndex.value)

    if (val >= page && val <= props.total - page) {
        xx.value = true
    } else {
        xx.value = false
    }
    if (val > props.total - page) {
        xxx.value = true
    } else {
        xxx.value = false
    }
})
watch(() => props.total,(val) => {
    //初始时 判断是否加载最后一个省略号
    nextTick(() => {
        if (val >= page + 2 && selIndex.value < val - page) {
            isShowNextMore()
        }
    })
},{ immediate:true })
</script>

<style lang="scss" scoped>
.layout{
    @include flexRowCenter;
    gap: 10px;
    user-select:none;
}
ul{
    @include flexRowCenter;

    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
    & li {
        width: 40px;
        height: 40px;
    }
}
.other{
    width: 90px;
    height: 40px;
}
button{
    padding: 10px;
    outline: none;
    border: 1px solid var(--el-border-color);
    height: 100%;
    width: 100%;
    @include flexRowCenter;
    &:hover{
        background: #dcdfe6;
    }
}

.selected{
    background: #00AEEC;
    color: white;
}
</style>